<template>
  <div class="prison-map-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">
        该地图由B站：
        <a
          href="https://space.bilibili.com/336273011"
          target="_blank"
          rel="noopener noreferrer"
          class="author-link"
        >
          幺伍丌
        </a>
        绘制授权给本网站dfhub.cn使用（感谢这位小姐姐对三角洲攻略做出的贡献） 
      </h1>
    </div>

    <!-- 楼层选择器 -->
    <div class="floor-selector">
      <n-card class="selector-card" :bordered="false">
        <div class="selector-content">
          <div class="selector-info">
            <span class="selector-title">楼层选择：</span>
            <span class="selector-tip">点击选择要显示的楼层（可多选叠加）</span>
          </div>
          <div class="floor-buttons">
            <n-checkbox
              v-for="floor in floors"
              :key="floor.key"
              :checked="selectedFloors.includes(floor.key)"
              @update:checked="toggleFloor(floor.key, $event)"
              class="floor-checkbox"
              size="small"
            >
              {{ floor.label }}
            </n-checkbox>
          </div>
        </div>
      </n-card>
    </div>

    <!-- 地图显示区域 -->
    <div class="map-display">
      <n-card class="map-card" :bordered="false">
        <div class="map-header">
          <h3>监狱地图叠加视图</h3>
          <div class="selected-floors-info">
            <n-tag
              v-for="floorKey in selectedFloors"
              :key="floorKey"
              :type="getFloorByKey(floorKey)?.type || 'default'"
              size="small"
              class="floor-tag"
            >
              {{ getFloorByKey(floorKey)?.label }}
            </n-tag>
            <span v-if="selectedFloors.length === 0" class="no-selection">
              请选择要显示的楼层
            </span>
          </div>
        </div>

        <div class="map-image-container">
          <div class="layered-images">
            <transition-group name="map-fade" tag="div" class="map-layers-container">
              <img
                v-for="floorKey in selectedFloors"
                :key="floorKey"
                :src="getImageUrlByKey(floorKey)"
                :alt="getFloorByKey(floorKey)?.label"
                class="map-layer"
                @error="onImageError"

              />
            </transition-group>
            <transition name="empty-fade">
              <div v-if="selectedFloors.length === 0" class="empty-state">
                <n-empty description="请选择楼层以查看地图" />
              </div>
            </transition>
          </div>
        </div>
      </n-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useMessage } from 'naive-ui'

// 消息提示
const message = useMessage()

// 楼层数据配置
interface Floor {
  key: string
  label: string
  description: string
  type: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'
  imageFile: string
}

const floors: Floor[] = [
  { key: 'base', label: '基础层', description: '监狱基础设施层', type: 'primary', imageFile: 'https://s21.ax1x.com/2025/07/09/pVQV0eK.png' },
  { key: 's-1', label: 'S-1', description: '地下一层', type: 'info', imageFile: 'https://img.picui.cn/free/2025/07/09/686dd78e7575f.png' },
  { key: 's1', label: 'S1', description: '一层', type: 'success', imageFile: 'https://img.picui.cn/free/2025/07/09/686dd78e3f7ae.png' },
  { key: 's2', label: 'S2', description: '二层', type: 'success', imageFile: 'https://img.picui.cn/free/2025/07/09/686dd78e086fd.png' },
  { key: 's3', label: 'S3', description: '三层', type: 'success', imageFile: 'https://img.picui.cn/free/2025/07/09/686dd78cdab20.png' },
  { key: 's4', label: 'S4', description: '四层', type: 'success', imageFile: 'https://img.picui.cn/free/2025/07/09/686dd79528edc.png' },
  { key: 'elevator1', label: '电梯1', description: '电梯区域1', type: 'warning', imageFile: 'https://s21.ax1x.com/2025/07/09/pVQV6Wd.png' },
  { key: 'elevator2', label: '电梯2', description: '电梯区域2', type: 'warning', imageFile: 'https://s21.ax1x.com/2025/07/09/pVQVyJH.png' },
  { key: 'elevator3', label: '电梯3', description: '电梯区域3', type: 'warning', imageFile: 'https://s21.ax1x.com/2025/07/09/pVQVsFe.png' }
]

// 响应式状态
const selectedFloors = ref(['base']) // 默认显示基础层

// 切换楼层选择（支持多选）
const toggleFloor = (floorKey: string, checked: boolean) => {
  if (checked) {
    if (!selectedFloors.value.includes(floorKey)) {
      selectedFloors.value.push(floorKey)
    }
  } else {
    const index = selectedFloors.value.indexOf(floorKey)
    if (index > -1) {
      selectedFloors.value.splice(index, 1)
    }
  }
}

// 根据key获取楼层信息
const getFloorByKey = (floorKey: string) => {
  return floors.find(floor => floor.key === floorKey)
}

// 根据key获取图片URL
const getImageUrlByKey = (floorKey: string) => {
  const floor = getFloorByKey(floorKey)
  if (!floor) return ''
  // 直接返回网络URL
  return floor.imageFile
}

// 图片加载错误事件
const onImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  console.error('地图图片加载失败:', target.src)
  message.error('地图图片加载失败')
}

// 预加载图片
const preloadImages = () => {
  floors.forEach(floor => {
    const img = new Image()
    img.src = floor.imageFile
    img.onerror = () => {
      console.warn(`预加载图片失败: ${floor.imageFile}`)
    }
  })
}

onMounted(() => {
  preloadImages()
})
</script>

<style scoped>
.prison-map-container {
  padding: 0 16px 0 16px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-header {
  margin-bottom: 12px;
  text-align: center;
  flex-shrink: 0;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
  color: var(--n-text-color-1);
  line-height: 1.2;
}

.author-link {
  color: #f56c6c;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.author-link:hover {
  color: #f78989;
  text-decoration: underline;
}

.floor-selector {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.map-display {
  flex: 1;
  min-height: 0;
}

.selector-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.selector-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.selector-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--n-text-color-1);
  white-space: nowrap;
}

.selector-tip {
  font-size: 0.75rem;
  color: var(--n-text-color-3);
  white-space: nowrap;
}

.floor-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.floor-checkbox {
  font-size: 0.85rem;
  white-space: nowrap;
}

.map-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--n-border-color);
  flex-shrink: 0;
}

.map-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--n-text-color-1);
}

.selected-floors-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.floor-tag {
  font-size: 0.75rem;
}

.no-selection {
  font-size: 0.85rem;
  color: var(--n-text-color-3);
  font-style: italic;
}

.map-image-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--n-card-color);
  height: 100%;
}

.layered-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.map-layers-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-layer {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-state {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 地图层过渡动画 */
.map-fade-enter-active {
  transition: opacity 0.4s ease-in-out;
}

.map-fade-leave-active {
  transition: opacity 0.4s ease-in-out;
  position: absolute !important;
}

.map-fade-enter-from {
  opacity: 0;
}

.map-fade-leave-to {
  opacity: 0;
}

.map-fade-enter-to {
  opacity: 1;
}

.map-fade-leave-from {
  opacity: 1;
}

/* 空状态过渡动画 */
.empty-fade-enter-active,
.empty-fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.empty-fade-enter-from,
.empty-fade-leave-to {
  opacity: 0;
}

.empty-fade-enter-to,
.empty-fade-leave-from {
  opacity: 1;
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .prison-map-container {
    padding: 12px;
    height: 100vh;
  }

  .page-header {
    margin-bottom: 8px;
  }

  .floor-selector {
    margin-bottom: 8px;
  }

  .selector-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .selector-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .floor-buttons {
    gap: 8px;
    justify-content: flex-start;
  }

  .page-title {
    font-size: 1.4rem;
  }

  .map-layer {
    max-width: 98%;
    max-height: 98%;
  }

  .selected-floors-info {
    justify-content: center;
  }

  .map-header h3 {
    font-size: 1.1rem;
  }
}

/* 超小屏幕 */
@media (max-width: 480px) {
  .prison-map-container {
    padding: 8px;
  }

  .floor-buttons {
    gap: 6px;
  }

  .map-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .selected-floors-info {
    width: 100%;
    justify-content: flex-start;
  }

  .page-title {
    font-size: 1.2rem;
  }

  .floor-checkbox {
    font-size: 0.8rem;
  }

  .selector-title {
    font-size: 0.9rem;
  }

  .selector-tip {
    font-size: 0.7rem;
  }
}
</style>
